<template>
  <div class="padding-container preview-wrap" v-if="!showBlock">
    <a class="tip-part" href="/control/user">{{ $root.lang.control.block.list.tip }}</a>
  </div>
	<div class="padding-container preview-wrap" v-else-if="showBlock">
    <div class="title-part">
      <el-button size="mini" type="primary" class="pull-right" @click="toLookLog()">{{ $root.lang.control.block.list.lookLog }}</el-button>
		</div>
		<el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
      <el-form-item :label="$root.lang.control.block.list.dataCode">
        <el-input v-model="tableParams.dataCode"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchAction()" >{{ $root.lang.control.block.list.query }}</el-button>
        <el-button size="small" @click="searchAction(true)" >{{ $root.lang.control.block.list.empty }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="pageList"
      :empty-text="$root.lang.control.block.list.noData"
      size="small"
      border
      style="width: 100%"
      :header-cell-style="{'text-align':'center'}"
      >
      <el-table-column
        align="center"
        width="170"
        :label="$root.lang.control.block.list.dataCode">
        <template slot-scope="scope">
          <span>{{ scope.row.dataCode }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="130"
        :label="$root.lang.control.block.list.imei">
        <template slot-scope="scope">
          <span>{{ scope.row.imei }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="370"
        :label="$root.lang.control.block.list.blockHash">
        <template slot-scope="scope">
          <span>{{ scope.row.blockHash }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="70"
        :label="$root.lang.control.block.list.blockHeight">
        <template slot-scope="scope">
          <span @click="getBlockDetail(scope.row.blockHeight, scope.row.dataDetails)"><a href="javascript:void(0);">{{ scope.row.blockHeight }}</a></span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="140"
        :label="$root.lang.control.block.list.blockGenerateDate">
        <template slot-scope="scope">
          <span>{{ scope.row.blockGenerateDate | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.block.list.appIdentification">
        <template slot-scope="scope">
          <span>{{ scope.row.appIdentification }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="70"
        :label="$root.lang.control.block.list.appVersion">
        <template slot-scope="scope">
          <span>{{ scope.row.appVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="90"
        align="center"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="toCheck(scope.$index, scope.row)">{{ $root.lang.control.block.list.check }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableTotal>0"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
      :current-page="tableParams.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="tableParams.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="tableTotal">
    </el-pagination>

    <BlockDetail :show="showDetail" :detail="detail" @editReceive="getReceive" />
	</div>
</template>

<script>
import BlockDetail from './components/blockDetail';
export default {
	name: 'BlockList',
	data() {
		return {
			tableParams: {
				pageNum: 1,
				pageSize: 10,
        mapId: 'DEVICE',
        dataCode: null
			},
			listLoading: false,
      pageList: [],
      tableTotal: 0,
      showBtn: true,
      showBlock: false,
      timer: null,
      timerList: [],
      checkParams: {
				clientId: null,
        mapId: 'DEVICE',
        dataCode: null,
        imei: null,
			},
      detail: {},
      showDetail: false
		}
	},
  components: {
    BlockDetail
  },
  methods: {
    getReceive(data) {
      this[data.key] = data.value
    },
    sizeChange(val) {
      this.tableParams.pageNum = 1
      this.tableParams.pageSize = val
      this.fetchData()
    },
    pageChange(val) {
      this.tableParams.pageNum = val
      this.fetchData()
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          pageNum: 1,
          pageSize: 10,
          mapId: 'DEVICE',
        }
      } else {
        this.tableParams.pageNum = 1
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.request({
        url: '/blockchain/business/page',
        method: 'post',
        data: this.$root.optionProcess(this.tableParams)
      }).then(response => {
        this.pageList = response.rows
        this.tableTotal = response.total
        this.listLoading = false
      }).catch(error => {
        this.pageList = []
        this.listLoading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    toCheck(index, row) {
      this.listLoading = true
      this.checkParams = {
				clientId: new Date().getTime(),
        mapId: 'DEVICE',
        dataCode: row.dataCode,
        imei: row.imei,
			}
      this.request({
        url: '/blockchain/business/check',
        method: 'post',
        data: this.$root.optionProcess(this.checkParams)
      }).then(response => {
        this.listLoading = false
        this.$message({
          message: this.$root.lang.control.block.list.checkSendTip,
          type: 'success',
          duration: 3 * 1000
        }) 
        let timerObj = {}
        timerObj.count = 10
        timerObj.clientId = this.checkParams.clientId
        timerObj.dataCode = this.checkParams.dataCode
        this.timerList.push(timerObj)
      }).catch(error => {
        this.listLoading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    getCheckResult(index, clientId, dataCode) {
			this.request({
        url: '/blockchain/business/check/' + clientId,
        method: 'get',
      }).then(response => {
        if(response.result != null) {
          this.timerList.splice(index)
          if(response.result == 'SUCCESS') {
            this.$message({
              message: '【数据标识：' + dataCode + '】校验成功',
              type: 'success',
              duration: 0, 
              showClose: true
            })
          } else {
            this.$message({
              message: '【数据标识：' + dataCode + '】校验失败',
              type: 'error',
              duration: 0, 
              showClose: true
            })
          }
        } 
      }).catch(error => {
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
		},
    getBlockDetail(blockHeight, dataDetails) {
			this.request({
        url: '/blockchain/query/block/' + blockHeight,
        method: 'get',
      }).then(response => {
        this.detail = response.result
        this.detail.dataDetails = dataDetails
        this.showDetail = true
      }).catch(error => {
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
		},
    // 暂时未展示
    getTransaction(blockHeight) {
      let params = {
				blockHeight: blockHeight
			}
      this.request({
        url: '/blockchain/query/transaction',
        method: 'post',
        data: this.$root.optionProcess(params)
      }).then(response => {
        console.log(response)
      }).catch(error => {
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    toLookLog() {
      this.$router.push({ name:'ChainLog' })
    },
  },
  created() {
    if(this.Cookies.get('T') == '2') {
      if(this.Cookies.get('O') == '1') {
        this.showBtn = false
      }
		} 
    this.showBlock = this.Cookies.get('B') == 3 ? true : false
    if(this.showBlock) {
      this.fetchData()
    }
    this.timer = setInterval(() => {
      if(this.timerList.length > 0) {
        for(var i = 0; i < this.timerList.length; i++) {
          var timerObj = this.timerList[i]
          var clientId = timerObj.clientId
          var dataCode = timerObj.dataCode
          this.getCheckResult(i, clientId, dataCode)
          this.timerList[i].count--
          if(this.timerList[i].count <= 0) {
            this.timerList.splice(i)
          }
        }
      }
    }, 5000)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
		.title-part {
			text-align: left;
			font-size: 18px;
			padding-bottom: 40px;
		}
    .tip-part {
			text-align: left;
			font-size: 15px;
			padding-bottom: 40px;
      color: red;
		}
	}
</style>